import React from 'react';
import { Card } from 'antd';
import { CouponFormData } from '@/types/coupon';

interface CouponPreviewProps {
  data: CouponFormData;
  visible: boolean;
}

const productNames: Record<string, string> = {
  all_products: '所有产品',
  membership_package: '会员套餐',
  super_director: '超级编导',
  digital_employee: '数智员工',
  xiaorui_zhibo: 'Know1智播'
};

const CouponPreview: React.FC<CouponPreviewProps> = ({ data, visible }) => {
  if (!visible) return null;

  // 根据优惠券类型显示不同的值格式
  const valueDisplay = data.type === 'fixed_amount' 
    ? `¥${data.value}` 
    : `${data.value}折`;

  // 使用门槛显示
  const limitDisplay = parseInt(data.threshold.toString()) > 0 
    ? `满${data.threshold}元可用` 
    : '无门槛使用';

  // 描述文本
  const descText = data.description || `适用于${productNames[data.applicableProduct] || '所有产品'}`;

  // 设置不同类型优惠券的样式
  const couponStyle = data.type === 'fixed_amount'
    ? { background: 'linear-gradient(135deg, #2563eb, #4f46e5)' }
    : { background: 'linear-gradient(135deg, #f59e0b, #d97706)' };

  return (
    <Card 
      title="优惠券预览" 
      className="mt-4"
      style={{ display: visible ? 'block' : 'none' }}
    >
      <div className="grid grid-cols-2 gap-4">
        <div className="coupon-preview" style={couponStyle}>
          <div className="coupon-content">
            <div>
              <div className="coupon-title">{data.name}</div>
              <div className="coupon-desc">
                {descText.substring(0, 50) + (descText.length > 50 ? '...' : '')}
              </div>
            </div>
            <div className="coupon-value">
              {data.type === 'fixed_amount' ? (
                valueDisplay
              ) : (
                <div className="discount-value">
                  <span className="discount-number">{data.value * 10}</span>
                  <span className="discount-unit">折</span>
                </div>
              )}
            </div>
            <div className="coupon-code">PREVIEW</div>
          </div>
        </div>
        <div>
          <div className="mb-2">
            <strong>优惠类型：</strong>
            <span>{data.type === 'fixed_amount' ? '固定金额' : '折扣百分比'}</span>
          </div>
          <div className="mb-2">
            <strong>使用门槛：</strong>
            <span>{limitDisplay}</span>
          </div>
          <div className="mb-2">
            <strong>有效期：</strong>
            <span>{data.expireAt}天</span>
          </div>
          <div className="mb-2">
            <strong>数量：</strong>
            <span>{data.generateCount}</span>
          </div>
          <div className="mb-2">
            <strong>优惠码生成：</strong>
            <span>唯一码</span>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default CouponPreview; 